import Header from "../../../../components/Header";
import './index.scss'
import {useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {articleDetail} from "../../../../api/api";
import moment from "moment";

const ArticleDetail = () => {
    const {id} = useParams();
    const [data, setData] = useState<any>({});
    useEffect(() => {
        articleDetail(id as string).then(r => {
            r = {
                ...r,
                created_at: moment(Number(r.created_at) * 1000).format("YYYY-MM-DD HH:mm:ss"),
                content: r.content.replaceAll('<img', '<img style="width:100%;height:auto;display:block;margin:0 auto" ')
            }
            setData(r);
        })
    }, []);
    return (
        <div className="article-detail-box">
            <Header title={data.name}/>
            <div>
                <h1>{data.name}</h1>
                <div>
                    <span>作者：{data?.username}</span>
                    <span>更新时间：{data?.created_at}</span>
                </div>
            </div>
            <div dangerouslySetInnerHTML={{__html: data?.content ?? ''}}></div>
        </div>
    )
}

export default ArticleDetail;